<template>
   <div class="vue-xunni-scroll">
     <RecycleScroller
      class="scroller"
      :items="list"
      :item-size="32"
      key-field="id"
      v-slot="{ item }"
    >
      <div class="user">
        {{ item.name }}
      </div>
    </RecycleScroller>
   </div>
  </template>
  
  <script>
  export default {
   data(){
    return {
        list:[]
    }
   },
   created(){
    for(let i = 0;i<100000;i++){
        this.list.push({
            id:i+1,
            name:`${i+1}小溪流`
        })
    }
   }
  }
  </script>
  
  <style scoped>
  .vue-xunni-scroll{
    height: 400px;
    width: 200px;
    border: 1px solid green;

  }
  .scroller {
    height: 100%;
  }
  
  .user {
    height: 32%;
    padding: 0 12px;
    display: flex;
    align-items: center;
  }
  </style>
  